<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=basePath%>css/weui.css">
<link rel="stylesheet" href="<%=basePath%>css/example.css">
<title>Insert title here</title>
</head>
<body style="background-color: #179B16;">
	<div class="weui-toptips weui-toptips_warn js_tooltips" style="display: none;" id="errorTips">题目信息填写不完整</div>

	<br>
	<h2 style="text-align: center; color: #FFFFFF">我要出题</h2>
	<form name="myForm" action="<%=basePath%>question/insetQuestion.do" method="post">
		<input type="hidden" name="token" value="${token }" />
		<input type="hidden" name="answerA" />
		<input type="hidden" name="answerB" />
		<input type="hidden" name="answerC" />
		<input type="hidden" name="answerD" />
		<input type="hidden" name="answer" />
		<div class="page__bd">
			<div class="weui-cells__title" style="color: #FFFFFF;">题目类型</div>
			<div class="weui-cells" style="background-color: #9ED99D;">
				<div class="weui-cell weui-cell_select weui-cell_select-after">
					<div class="weui-cell__bd">
						<select class="weui-select" id="typeCode" id="typeCode" name="typeCode">
							<option value="">请选择题目类型</option>
							<c:forEach items="${typeList }" var="type" varStatus="varStatus">
								<option value="${type.typeCode }">${type.typeName }</option>
							</c:forEach>
						</select>
					</div>
				</div>
			</div>

			<div class="weui-cells__title" style="color: #FFFFFF;">题目内容</div>
			<div class="weui-cells weui-cells_form" style="background-color: #9ED99D;">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<textarea name="questionContent" class="weui-textarea"
							placeholder="请输入题目内容" rows="3" style="background-color: #9ED99D;"
							id="questionContentTextareaId"
							onkeyup="countChar('questionContentTextareaId','questionContentSpanId');"
							onkeydown="countChar('questionContentTextareaId','questionContentSpanId');"></textarea>
						<div class="weui-textarea-counter">
							<span id="questionContentSpanId">0</span>/500
						</div>
					</div>
				</div>
			</div>

			<div class="weui-cells__title" style="color: #FFFFFF">选项和答案</div>
			<div class="weui-cells weui-cells_radio" style="background-color: #9ED99D;">
				<label class="weui-cell weui-check__label" for="x11">
					<div class="weui-cell__bd">
						<p>选项A</p>
					</div>
					<div class="weui-cell__ft">
						<input type="radio" class="weui-check" name="radio1" id="x11" value="01">
						<span class="weui-icon-checked"></span>
					</div>
				</label>
				<div class="weui-cells weui-cells_form" style="background-color: #9ED99D;">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<textarea class="weui-textarea" placeholder="请输入选项内容" rows="3"
								style="background-color: #9ED99D;" id="optionATextareaId"
								onkeyup="countChar('optionATextareaId','optionASpanId');"
								onkeydown="countChar('optionATextareaId','optionASpanId');"></textarea>
							<div class="weui-textarea-counter">
								<span id="optionASpanId">0</span>/200
							</div>
						</div>
					</div>
				</div>

				<label class="weui-cell weui-check__label" for="x12">
					<div class="weui-cell__bd">
						<p>选项B</p>
					</div>
					<div class="weui-cell__ft">
						<input type="radio" name="radio1" class="weui-check" id="x12" value="02">
						<span class="weui-icon-checked"></span>
					</div>
				</label>
				<div class="weui-cells weui-cells_form" style="background-color: #9ED99D;">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<textarea class="weui-textarea" placeholder="请输入选项内容" rows="3"
								style="background-color: #9ED99D;" id="optionBTextareaId"
								onkeyup="countChar('optionBTextareaId','optionBSpanId');"
								onkeydown="countChar('optionBTextareaId','optionBSpanId');"></textarea>
							<div class="weui-textarea-counter">
								<span id="optionBSpanId">0</span>/200
							</div>
						</div>
					</div>
				</div>

				<label class="weui-cell weui-check__label" for="x13">
					<div class="weui-cell__bd">
						<p>选项C</p>
					</div>
					<div class="weui-cell__ft">
						<input type="radio" name="radio1" class="weui-check" id="x13" value="03">
						<span class="weui-icon-checked"></span>
					</div>
				</label>
				<div class="weui-cells weui-cells_form" style="background-color: #9ED99D;">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<textarea class="weui-textarea" placeholder="请输入选项内容" rows="3"
								style="background-color: #9ED99D;" id="optionCTextareaId"
								onkeyup="countChar('optionCTextareaId','optionCSpanId');"
								onkeydown="countChar('optionCTextareaId','optionCSpanId');"></textarea>
							<div class="weui-textarea-counter">
								<span id="optionCSpanId">0</span>/200
							</div>
						</div>
					</div>
				</div>

				<label class="weui-cell weui-check__label" for="x14">
					<div class="weui-cell__bd">
						<p>选项D</p>
					</div>
					<div class="weui-cell__ft">
						<input type="radio" name="radio1" class="weui-check" id="x14" value="04">
						<span class="weui-icon-checked"></span>
					</div>
				</label>
				<div class="weui-cells weui-cells_form" style="background-color: #9ED99D;">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<textarea class="weui-textarea" placeholder="请输入选项内容" rows="3"
								style="background-color: #9ED99D;" id="optionDTextareaId"
								onkeyup="countChar('optionDTextareaId','optionDSpanId');"
								onkeydown="countChar('optionDTextareaId','optionDSpanId');"></textarea>
							<div class="weui-textarea-counter">
								<span id="optionDSpanId">0</span>/200
							</div>
						</div>
					</div>
				</div>

				<a href="javascript:void(0);" class="weui-cell weui-cell_link">
					<div class="weui-cell__bd">添加更多</div>
				</a>
			</div>

			<div class="weui-cells__title" style="color: #FFFFFF;">题目描述</div>
			<div class="weui-cells weui-cells_form" style="background-color: #9ED99D;">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<textarea name="questionDesc" class="weui-textarea"
							placeholder="请输入题目描述" rows="3" style="background-color: #9ED99D;"
							id="questionDescTextareaId"
							onkeyup="countChar('questionDescTextareaId','questionDescSpanId');"
							onkeydown="countChar('questionDescTextareaId','questionDescSpanId');"></textarea>
						<div class="weui-textarea-counter">
							<span id="questionDescSpanId">0</span>/200
						</div>
					</div>
				</div>
			</div>

			<label for="weuiAgree" class="weui-agree">
				<input id="weuiAgree" type="checkbox" class="weui-agree__checkbox" checked="checked" disabled="disabled">
				<span class="weui-agree__text">
					阅读并同意<a href="javascript:void(0);">《相关条款》</a>
				</span>
			</label>

			<div class="weui-btn-area">
				<a class="weui-btn weui-btn_primary" href="javascript:;" onclick="doAddQuestion();" id="showTooltips">确定</a>
			</div>
		</div>
	</form>

	<div class="weui-footer">
		<p class="weui-footer__links">
			<a href="<%=basePath%>index.do" class="weui-footer__link">realQuestion</a>
		</p>
		<p class="weui-footer__text">Copyright © 2018 question.realjinge.com</p>
	</div>
</body>

<script type="text/javascript">
	function countChar(textareaId, spanId) {
		document.getElementById(spanId).innerHTML = document.getElementById(textareaId).value.length;
	}

	function showErrorTips(msg) {
		document.getElementById("errorTips").innerHTML = msg;
		document.getElementById("errorTips").style.display = "inline";
		setTimeout(function() {
			document.getElementById("errorTips").style.display = "none";
		}, 2500);
	}

	function doAddOption() {
		var radio1 = document.myForm.radio1.value;
		var answerA = document.getElementById('optionATextareaId').value;
		var answerB = document.getElementById('optionBTextareaId').value;
		var answerC = document.getElementById('optionCTextareaId').value;
		var answerD = document.getElementById('optionDTextareaId').value;
		if (document.getElementById("x11").checked) {
			alert("x11 is checked");
		} else if (document.getElementById("x12").checked) {
			alert("x12 is checked");
		} else if (document.getElementById("x13").checked) {
			alert("x13 is checked");
		} else if (document.getElementById("x14").checked) {
			alert("x14 is checked");
		} else {
			showErrorTips('请选择正确的选项');
			return false;
		}
	}

	function doAddQuestion() {
		var typeCode = document.getElementById('typeCode').options[document.getElementById('typeCode').selectedIndex].value;
		if (typeCode == '') {
			showErrorTips('请选择题目类型');
			return false;
		}

		var questionContent = document.myForm.questionContent.value;
		if (questionContent == '') {
			showErrorTips('请输入题目内容');
			return false;
		}

		var answerA = document.getElementById('optionATextareaId').value;
		var answerB = document.getElementById('optionBTextareaId').value;
		var answerC = document.getElementById('optionCTextareaId').value;
		var answerD = document.getElementById('optionDTextareaId').value;
		if (answerA == '' || answerB == '' || answerC == '' || answerD == '') {
			showErrorTips('请输入完整的选项内容');
			return false;
		} else {
			document.myForm.answerA.value = answerA;
			document.myForm.answerB.value = answerB;
			document.myForm.answerC.value = answerC;
			document.myForm.answerD.value = answerD;
		}
		if (document.getElementById("x11").checked) {
			// alert("x11 is checked");
		} else if (document.getElementById("x12").checked) {
			// alert("x12 is checked");
		} else if (document.getElementById("x13").checked) {
			// alert("x13 is checked");
		} else if (document.getElementById("x14").checked) {
			// alert("x14 is checked");
		} else {
			showErrorTips('请选择正确的选项');
			return false;
		}
		var radio1 = document.myForm.radio1.value;
		document.myForm.answer.value = radio1;

		document.myForm.submit();
	}
</script>

</html>